<template>
    <div class="task">
        <div class="task-nav">
            <el-menu :default-active="active" :router="true" class="el-menu-vertical-demo" :collapse="isCollapse" text-color="#545c64" active-text-color="#409EFF">
                <el-menu-item index="/task">
                    <i class="el-icon-menu"></i>
                    <span slot="title">未处理</span>
                </el-menu-item>
                <el-menu-item index="/task/processed">
                    <i class="el-icon-document"></i>
                    <span slot="title">已处理</span>
                </el-menu-item>
            </el-menu>
            <div class="change" @click="handleChange">
                <span :class="[isCollapse? 'open': '', 'el-icon-arrow-left']"></span>
            </div>
        </div>
        <div class="content">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
</template>

<script>

export default {
    name: 'task',
    data() {
        return {
            isCollapse: false,
            bools: false,
        }
    },
    watch: {
        $route: {   // 监听路由，高亮显示导航条当前项
            handler() {
                var router = (this.$route.path).split('/');
                console.log(router)
                this.active = router[2] ? `/${router[1]}/${router[2]}`: `/${router[1]}`
            },
            immediate: true
        },
        bools(to, from) {
            console.log(to, from)
            if(from){
                this.bool = true
            } else {
                this.bool = false
            }
        }
    },
    computed: {},
    methods: {
        handleChange() {
            this.isCollapse = !this.isCollapse;
        }
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.task {
    display: flex;
    width: 100%;
}
.task-nav {
    position: relative;
    .change{
        position: absolute;
        top: 50%;
        right: -20px;
        width: 20px;
        height: 80px;
        border: 1px solid #e6e6e6;
        border-left: 0 none;
        transform: translate(0, -50%) rotateY(0);
        border-radius: 0 10px 10px 0;
        display: flex;
        align-items: center;
        justify-content: center;

        .open {
            transition: all .5s;
            transform: rotateY(180deg);
        }
    }
}
.content{
    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - 60px);
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;

}
.el-menu-vertical-demo {
    height: calc(100vh - 60px);

    &:not(.el-menu--collapse) {
        width: 200px;
    }
}

.index-enter-active,.index1-enter-active {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      z-index: 1;
      transition: all .3s;
} 
.index-leave-active,.index1-leave-active {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      z-index: -1;
      transition: all .3s;
}
.index-enter, .index-leave-to{
      transform: translate(20px, 0);
      opacity: 0;
}
.index1-enter, .index1-leave-to{
      transform: translate(-20px, 0);
      opacity: 0;
}
</style>